<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>

<%@include file="/common/head.jsp" %>
<style>
    #add {
        padding: 20px;
        display: none;
    }

    .err {
        display: none;
    }

    .expire input.form-control {
        display: inline-block;
        width: 80%;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <form action="${ctx}/admin/servicePackage/list" method="post" id="query-form"></form>
    <div class="col-sm-12">
        <div>
            <p>
                <button type="button" class="btn btn-sm btn-outline btn-primary" onclick="add()"><i
                        class="fa fa-plus"></i> 新增
                </button>
            </p>
        </div>
        <table id="table" data-toggle="table" data-striped="true" data-click-to-select="true"
               data-mobile-responsive="true">
            <thead>
            <tr>
                <th data-field="name">账号类型名称</th>
                <th data-field="type">账号类型</th>
                <th data-field="expireDays">有效期限</th>
                <th data-field="status">操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${list }" var="n" varStatus="idx">
                <tr data-index="${idx.index }" data-id="${n.id }">
                    <td style="">${n.name }</td>
                    <td style="">
                        <c:forEach items="${types}" var="t">
                            <c:if test="${n.type == t.value }">
                                ${t.remark}
                            </c:if>
                        </c:forEach>
                    </td>
                    <td style="">${n.expireDays }</td>
                    <td>
                        <c:if test="${n.status == 0}">
                            <a href="javascript: void(0);" onclick="updateStatus(${n.id}, 1)">启用</a>
                        </c:if>
                        <c:if test="${n.status == 1}">
                            <a href="javascript: void(0);" onclick="updateStatus(${n.id}, 0)">禁用</a>
                        </c:if>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>

        <%@include file="/common/page.jsp" %>

    </div>
</div>
<div id="add">
    <form action="${ctx}/admin/servicePackage/save" method="post" class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-5 control-label">账号类型名称：</label>
            <div class="col-sm-7">
                <input type="text" class="form-control" name="name" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-5 control-label">有效期限：</label>
            <div class="col-sm-7 expire">
                <input type="text" id="expireDays" class="form-control num_input" name="expireDays" required>天
                <p class="text-danger err">格式错误，请填写大于等于1的整数</p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-5 control-label">账号类型：</label>
            <div class="col-sm-7">
                <select name="type" id="type" class="form-control" required>
                    <c:forEach items="${types}" var="t">
                        <option value="${t.value}">${t.remark}</option>
                    </c:forEach>
                </select>
            </div>

        </div>
    </form>
</div>
<%@include file="/common/foot.jsp" %>
<script>
    function updateStatus(id, status) {
        k.layer.updateStatus('${ctx}/admin/servicePackage/enableOrDisable', id, status);
    }

    function validate() {
        var t = true;
        if ($("#expireDays").val() <= 0) {
            t = false;
            $(".err").show();
        }
        return t;
    }

    function add() {
        layer.open({
            type: 1,
            content: $("#add"),
            btn: ['确定', '取消'],
            yes: function () {
                if (validate()) {
                    $("#add form").ajaxSubmit({
                        success: function (data) {
                            if(isSuccess(data)){
                                reload();
                            }
                        }
                    });
                }
            },
            cancel: function (index) {
                layer.close(index);
            }
        })
    }

    $(document).on("input", "#expireDays", function () {
        $(this).val($(this).val().replace(/\D/g, ""));
        if ($(this).val() == '0') {
            $(".err").show();
        } else {
            $(".err").hide();
        }
    });

    var page = "${page.page}";
    function reload() {
        page_submit(page);
    }
    paging('pagination', ${page.totalPages}, ${page.page});
</script>
</body>
</html>